<!-- src/components/Register.vue -->
<template>
    <div class="auth-container">
        <div class="auth-card">
            <h2>用户注册</h2>
            <form @submit.prevent="handleRegister">
                <div class="form-group">
                    <label>用户名：</label>
                    <input 
                        v-model="form.username" 
                        type="text" 
                        required
                        class="form-control"
                    >
                </div>
                <div class="form-group">
                    <label>密码：</label>
                    <input 
                        v-model="form.password" 
                        type="password" 
                        required
                        class="form-control"
                    >
                </div>
                <div class="form-group">
                    <label>确认密码：</label>
                    <input 
                        v-model="form.confirmPassword" 
                        type="password" 
                        required
                        class="form-control"
                    >
                </div>
                <div class="form-buttons">
                    <button type="submit" class="btn btn-primary">注册</button>
                    <button type="button" @click="$router.push('/login')" class="btn btn-secondary">
                        去登录
                    </button>
                    <button type="button" @click="$router.push('/')" class="btn btn-secondary">
                        取消
                    </button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- 自动消失的提示弹窗 -->
    <div v-if="showAlert" class="alert-overlay">
        <div class="alert-popup">
            {{ alertMessage }}
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const form = ref({
    username: '',
    password: '',
    confirmPassword: ''
})

const showAlert = ref(false)
const alertMessage = ref('')

const showAutoDismissAlert = (message) => {
    alertMessage.value = message
    showAlert.value = true
    setTimeout(() => {
        showAlert.value = false
    }, 2000) // 2秒后自动消失
}

const handleRegister = () => {
    if (form.value.password !== form.value.confirmPassword) {
        showAutoDismissAlert('两次输入的密码不一致！')
        return
    }
    
    // 确保从localStorage获取的是数组
    let users = JSON.parse(localStorage.getItem('users') || '[]')
    
    // 确保users是数组类型
    if (!Array.isArray(users)) {
        users = []
    }
    
    if (users.some(u => u.username === form.value.username)) {
        showAutoDismissAlert('用户名已存在！')
        return
    }
    
    const newUser = {
        username: form.value.username,
        password: form.value.password
    }
    
    users.push(newUser)
    localStorage.setItem('users', JSON.stringify(users))
    
    showAutoDismissAlert('注册成功！')
    setTimeout(() => {
        router.push('/login')
    }, 2000)
}
</script>
<style scoped>
.alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.alert-popup {
    background-color: white;
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    text-align: center;
    font-size: 16px;
    font-weight: 500;
}
</style>